<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加、删除子节点</title>
    <style>
        div{
            border:1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <script>
        //1.获取超链接
        var element_a=document.getElementById("del");
        //2.绑定单击事件
        element_a.onclick=function (){
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            div1.removeChild(div2);
            //1.获取超链接
            var element_add=document.getElementById("add");
            //2.绑定单击事件
            element_add.onclick=function () {
                var div1=document.getElementById("div1");
            //给div1添加子节点
                //创建div节点
                var div3=document.createElement("div");
                div3.setAttribute("id","div3");
                div1.appendChild(div3);


            }
        }
    </script>

</body>
</html>